<template>
  <div class="content">
<!--    <div class="components">-->
<!--      <HomeTop></HomeTop>-->
<!--    </div>-->
    <div class="page-content">
      <Navigation :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'就业困难人员专区',url:'/difficult-job/difficult-job'}]"></Navigation>
      <div class="block">
        <router-link class="menu-item" :style="`background:${item.color}`" v-for="(item,index) in menuList" :key="item.id" :to="{name:'difficultDetail',query:{type:item.type,tabName:item.value}}">
          <div class="name">{{item.value}}</div>
          <img alt="" class="icon" :src="item.icon">
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
export default {
  name: "difficultJob",
  data(){
    return{
      menuList:[
        {id:1,value:'“40、50”人员',icon:'./static/images/difficult/1.png',color:'#EAFAED',type:9},
        {id:2,value:'残疾人员',icon:'./static/images/difficult/2.png',color: '#FFF5F4',type:10},
        {id:3,value:'享受最低生活保障人员',icon:'./static/images/difficult/3.png',color: '#FDF7EB',type:11},
        {id:4,value:'城镇登记失业人员',icon:'./static/images/difficult/4.png',color: '#EAF9FE',type:12},
        {id:5,value:'被征地农民',icon:'./static/images/difficult/5.png',color: '#EAFAED',type:13},
        {id:6,value:'特困职工家庭人员',icon:'./static/images/difficult/6.png',color: '#FFF5F4',type:14},
        {id:7,value:'零就业家庭人员',icon:'./static/images/difficult/7.png',color: '#FDF7EB',type:15},
        {id:8,value:'困难高校毕业生',icon:'./static/images/difficult/8.png',color: '#EAF9FE',type:16},
      ]
    }
  },
  components:{Navigation}
}
</script>

<style scoped lang="scss">
  .content{
    .page-content{
      width: $contentWidth;
      min-height: $fullMinHeight;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      .block{
        width: 100%;
        background: #fff;
        padding: 20px;
        padding-bottom: 0;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .menu-item{
          display: flex;
          width: calc((100% - 40px)/3);
          height: 100px;
          border-radius: 5px;
          margin-right: 20px;
          margin-bottom: 20px;
          flex-direction: row;
          align-items: center;
          padding: 0 20px;
          .name{
            width: calc(100% - 55px);
            font-weight: bold;
            font-size: 17px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .icon{
            width: 55px;
            height: 55px;
          }
        }
        .menu-item:nth-child(3n){
          margin-right: 0;
        }
      }
    }
  }
</style>
